<template>
    <div class="dashboard-container "  >
      <div class="dashboard-text">
        <ul>
          <li class="item" >
            <div class="title">{{ title }}</div>
            <div class="line"></div>
            <!-- <div class="content">22</div> -->
            <div v-html="str" class="con"></div>
          </li>
        </ul>
        <div class="font">
          看完这条新闻您的心情如何？请选择一个最能描述您当前情绪状态的选项
        </div>
        <div class="wrap_icon">
            <span :class="{ icon: true, selected: is_selected==1 }">
              <img src="../../icons/11.png"  @click="handleZan(1)"/>
            </span>
            <span :class="{ icon: true, selected: is_selected==2 }"><img src="../../icons/22.png"  @click="handleZan(2)"/></span>
            <span :class="{ icon: true, selected: is_selected==3 }"><img src="../../icons/33.png"  @click="handleZan(3)"/></span>
            <span :class="{ icon: true, selected: is_selected==4 }"><img src="../../icons/44.png"  @click="handleZan(4)"/></span>
            <span :class="{ icon: true, selected: is_selected==5 }"><img src="../../icons/55.png"  @click="handleZan(5)"/></span>
        </div>

        <el-button size="mini" type="primary" class="top" @click="handleTop">回到顶部</el-button>
        <el-button size="mini" type="primary" class="clear" @click="handleBack">返回</el-button>

        
      </div>
    </div>
  </template>
  
  <script>
  import { mapGetters } from 'vuex'
  import { ImgBaseUrl } from '@/utils/index'
  import { newsClose, newsLike, newsProgress } from '@/api/news'
  
  export default {
    name: 'Dashboard',
    computed: {
      ...mapGetters([
        'name'
      ])
    },
    data(){
      return {
        ImgBaseUrl,
        title: '',
        str: '',
        serial: '',
        questions: [],
        readNumber: 0,
        nowNumber: 0,
        progress: [100, 80, 60, 40, 20],
        type: '',
        is_selected: ''
      }
    },
    mounted(){
        //返回页面顶部
        this.handleTop();

        
        this.title = sessionStorage.getItem('title');
        this.serial = sessionStorage.getItem('serial');
        this.type = sessionStorage.getItem('type');
        let content = JSON.parse(sessionStorage.getItem('content'));
        let images = JSON.parse(sessionStorage.getItem('images'));
        // this.readNumber = Number(sessionStorage.getItem('readNumber'));
        
        let str = [];
        for(let i=0; i<Math.max(content.length, images.length);i++){
            if(i<content.length){
                str.push(`<div class="content">${content[i]}</div>`)
            }

            if(i<images.length){
                str.push(`<img class="img_1" src="${ImgBaseUrl+images[i]}" style="width: 100%; margin: 10px 0;"></div>`)
            }
        }
        this.str = str.join('');

        // //判断阅读文章数
        // if(this.readNumber>=10){
        //     //弹出问卷
        //     this.getQuestion();
        // }else if(this.type == 'start'){
        //   this.getQuestion();
        // }

        window.addEventListener('scroll', this.handleScroll)
    },
    beforeDestroy(){
      window.removeEventListener('scroll',this.handleScroll) 
    },
    methods: {
        handleTop(){
          //返回页面顶部
          window.scrollTo(0, 0);
        },
        // 滚动事件
        async handleScroll(){
          var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
          var windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
          var scrollHeight = document.documentElement.scrollHeight||document.body.scrollHeight;
          
          // scrollTop 最小值0
          // scrollTop 最大值 scrollHeight-windowHeight
          let number = Math.floor((scrollTop/(scrollHeight-windowHeight))*100)

          if(number==100&&this.nowNumber!=100){
            this.nowNumber = 100;
            await newsProgress({ serial: this.serial, progress: 100 })
            return;
          }

          if(number>=80&&this.nowNumber<80){
            this.nowNumber = 80
            await newsProgress({ serial: this.serial, progress: 80 })
            return;
          }

          if(number>=60&&this.nowNumber<60){
            this.nowNumber = 60
            await newsProgress({ serial: this.serial, progress: 60 })
            return;
          }

          if(number>=30&&this.nowNumber<40){
            this.nowNumber = 40
            await newsProgress({ serial: this.serial, progress: 40 })
            return;
          }

          if(number>=20&&this.nowNumber<20){
            this.nowNumber = 20
            await newsProgress({ serial: this.serial, progress: 20 })
            return;
          }
        
        },
        
        //点击赞
        async handleZan(likeLevel){
            if(this.is_selected){
              this.$message.error({ message: '已选择请勿重复提交' })
              return;
            }
            this.is_selected = likeLevel;
            await newsLike({ serial: this.serial, likeLevel });
            // alert('提交成功')
            this.$message.success({ message: '感谢您的提交' })
        },
        //返回上一页
        async handleBack(){
            await newsClose({ serial: this.serial })
            this.$router.go(-1)
        }
    }
  }
  </script>
  
  <style lang="scss" scoped>
  .dashboard {
    &-container {
      margin: 30px;
    }
    &-text {
      font-size: 16px;
      line-height: 20px;
      max-width: 800px;
      margin: 0 auto;
      .wrap_icon{
        display: flex;
        padding: 0 10px 140px;
        margin-top: 20px;
        margin-bottom: 30px;
        .icon{
            flex: 1;
            padding: 10px;
            text-align: center;
            img{
                width: 100%;
                max-width: 60px;
                cursor: pointer;
            }
        }
        .selected{
          border: 2px solid red;
        }
      }
      ul{
        padding: 0 0 10px;
        margin: 0 auto 10px;
      }
      .item{
        list-style: none;
        box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
        margin-bottom: 15px;
        padding: 10px;
        border-radius: 5px;
        .title{
          font-weight: bold;
          line-height: 30px;
          font-size: 25px;
          margin-bottom: 10px;
          font-weight: bold;
          padding: 20px 0;
        }
        .line{
            border-bottom: 1px solid #eee;
            margin: 10px 0 20px;
        }
        .content{
          color: #333;
          text-indent: 0;
        }
        .con{
            .img_1{
                width: 100%;
                margin-right: 10px;
            }
        }
        
      }
      .top{
        position: fixed;
        bottom: 15%;
        right: 5%;
      }
      .clear{
        position: fixed;
        bottom: 10%;
        right: 5%;
      }
    }
  }
  </style>
  